<template>
  <div class="loginPage">
    <div class="loginArea">
      <!-- 手机号密码登陆 -->
      <LoginWithPhone v-if="accountPasswordLogin" />
      <!-- 二维码登陆 -->
      <LoginWithRQCode v-if="scanLogin" />
      <!-- 验证码登陆 -->
      <LoginWithCaptcha v-if="PhoneCaptcha" />
      <!-- 选择登陆方式 -->
      <ul class="switchLoginMethod">
        <li v-if="!scanLogin" @click="switchLoginMethod(1)">扫码登录</li>
        <li v-if="!accountPasswordLogin" @click="switchLoginMethod(2)">账号密码登录</li>
        <li v-if="!PhoneCaptcha" @click="switchLoginMethod(3)">手机验证码登录</li>
      </ul>
    </div>
  </div>
</template>

<script>
import LoginWithPhone from "./loginPage/LoginWithPhone.vue"
import LoginWithRQCode from "./loginPage/LoginWithQRCode.vue"
import LoginWithCaptcha from './loginPage/LoginWithCaptcha.vue'

export default {
  name: "PcmyLoginpage",

  components: {
    LoginWithPhone,
    LoginWithRQCode,
    LoginWithCaptcha
  },

  data() {
    return {
      // 账号密码登录
      accountPasswordLogin: true,
      // 扫码登录
      scanLogin: false,
      // 手机验证码登录
      PhoneCaptcha: false,
    }
  },

  methods: {
    switchLoginMethod(num) {
      let that = this
      switch (num) {
        case 1:
          that.scanLogin = true
          that.PhoneCaptcha = false
          that.accountPasswordLogin = false
          break;
        case 2:
          that.scanLogin = false
          that.PhoneCaptcha = false
          that.accountPasswordLogin = true
        case 3:
          that.scanLogin = false
          that.PhoneCaptcha = true
          that.accountPasswordLogin = false
      }
    },
  },
};
</script>

<style lang="less" scoped>
.loginPage {
  background: #9095e4;
  width: 98%;
  height: 1000px;
  text-align: center;

  .loginArea {
    background: white;
    width: 30%;
    height: 35%;
    padding: 100px;
    position: absolute;
    top: 50%;
    right: 4%;
    margin-top: -17%;
    border-radius: 17px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .switchLoginMethod {
      list-style: none;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>